<template>

    <div>
        <h1>角色列表</h1>
         <input type="text" v-model="searchMap.data.roleName" placeholder="请输入角色的名称" >
        <input type="submit" value="search" @click="search()">

        <table width="100%" border="1px" cellspacing="0px" cellspading="0px">
            <tr>
                <th>角色id</th>
                <th>角色名称</th>
                <th>角色描述</th>
            </tr>

            <tr v-for="(item, index) in roleList" :key="index">
                <td>{{item.roleCode}}</td>
                <td>{{item.roleName}}</td>
                <td>{{item.roleDesc}}</td>
            </tr>
        </table>


        <span v-for="item in pages" @click="searchMap.page=item ;search();">【{{item}}】</span>


        <form action="">

            <input type="text" placeholder="roleName" v-model="entity.roleName">
            <input type="text" placeholder="roleDesc" v-model="entity.roleDesc">
            <input type="text" placeholder="roleCode" v-model="entity.roleCode">
            <input type="submit" value="save" @click.prevent="save()">
        </form>




    </div>
</template>
<script>
//引用role相关的api
import {roleSearch,saveRole} from '@/api/role.js'
export default {
    data() {
        return {
             searchMap:{
                page:1,
                limit:2,
                data:{

                }
            },
            roleList:[],//角色列表
            totals:0, //总记录数
            pages:0, //总页数
            entity:{} //角色对象
        }
    },

     methods: {
            search(){
                    //发送异步请求
                    var _this = this;
                    roleSearch(this.searchMap).then(res=>{//请求成功处理
                            console.log(res);
                            _this.roleList = res.data

                            _this.pages = res.pages;

                    })
                    
            },
            save(){//保存角色信息
                //写异步请求
                var _this = this;
                saveRole(this.entity).then(res=>{
                       if(res.success){
                            _this.search();
                       }else{
                           alert(res.msg);
                       }
                })
            }
        },
        created() {//页面加载
            this.search()
        },
}
</script>